<template>
  <div class="app-container">
    <div class="container-module">
      <div class="search-module">
        <el-form :inline="true" class="search-form" size="small" ref="searchForm" :model="searchForm">
          <div class="flex-between">
            <div style="flex:1">
              <el-form-item label="活动名称" class="search-form-item" prop="activity_name">
                <el-input placeholder="请输入活动名称" v-model="searchForm.activity_name">
                </el-input>
              </el-form-item>
              <el-form-item label="活动状态" class="search-form-item" prop="status">
                <el-select v-model="searchForm.status" placeholder="请选择状态">
                  <el-option v-for="item in status" :key="item.id" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="创建时间" class="search-form-item" prop="time" v-if="searchDisplay">
                <el-date-picker clearable @change="timeWay" value-format="yyyy-MM-dd HH:mm" v-model="time"
                  type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
            </div>
            <div class="button-box">
              <el-button @click="getListWay" type="primary" icon="el-icon-search"
                class="marginBottom-10">查询</el-button>
              <el-button icon="el-icon-refresh-left" type="primary" @click="resetForm('searchForm')">重置</el-button>
              <el-button v-if="!searchDisplay" type="warning" icon="el-icon-caret-bottom"
                @click="searchDisplay = true">展开</el-button>
              <el-button v-else type="warning" icon="el-icon-caret-top" @click="searchDisplay = false">收起</el-button>
            </div>
          </div>
        </el-form>
      </div>
      <el-divider></el-divider>
      <div class="table-module">
        <div class="marginBottom">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="16">
              <div class="left-panel">
                <el-button @click="addDetail('新建活动')" type="primary" icon="el-icon-plus"
                  class="inquire-box marginRight-10">添加活动</el-button>
              </div>
            </el-col>
            <el-col :xs="24" :sm="8">
              <div class="right-panel el-button-group">
                <el-button class="" icon="el-icon-refresh" size="mini" @click="refresh"></el-button>
                <el-dropdown trigger="click" :hide-on-click="false">
                  <span class="el-dropdown-link">
                    <el-button class="" icon="el-icon-s-operation" size="mini"></el-button>
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
                      <el-checkbox v-model="checkboxTableThead"
                        :label="fruit">{{ tableTheadOptions[fruit].label }}</el-checkbox>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </el-col>
          </el-row>
        </div>
        <!-- <div class="table-top flex-between">
          <div class="flex button-box">
            <el-button @click="addDetail('新建活动')" type="primary" icon="el-icon-plus"
              class="inquire-box marginRight-10">新建</el-button>
          </div>

        </div> -->
        <el-row>
          <el-col>
            <el-table v-loading="loading" highlight-current-row :data="dataList" :header-cell-style="{
                'background-color': '#f3f8fe',
                color: '#606266',
                height: '50px',
              }" style="width: 100%">
              <el-table-column v-for="fruit in tableThead" :key="fruit" :label="tableTheadOptions[fruit].label"
                :min-width="tableTheadOptions[fruit].minwidth" align="center">
                <template slot-scope="scope">
                  <div v-if="fruit == 'status'">
                    <span v-if="scope.row.status == -1">活动结束</span>
                    <span v-if="scope.row.status == 1">已开启</span>
                    <span v-if="scope.row.status == 2">已关闭</span>
                    <span v-if="scope.row.status == 3">进行中</span>
                  </div>
                  <div v-else-if="fruit == 'json_area_name'">
                    <!-- 生效地区：提示多个区域需要用分隔符区分，‘空格’+‘/’,超过三个显示超过的数量 -->

                    <el-tooltip class="item" effect="dark" :content="
                        scope.row.json_area_name && scope.row.json_area_name.length > 0
                          ? scope.row.json_area_name.toString()
                          : '全部'
                      " placement="top">
                      <div v-if="
                          scope.row.json_area_name && scope.row.json_area_name.length !== 0
                        " style="display: flex; justify-content: center">
                        <div v-if="index < 3" v-for="(item, index) in scope.row.json_area_name
                            ? scope.row.json_area_name
                            : []" :key="index">
                          {{ item }} /
                        </div>
                        <div v-if="
                            scope.row.json_area_name
                              ? scope.row.json_area_name.length > 3
                              : false
                          " class="table-num">
                          + {{ scope.row.json_area_name.length }}
                        </div>
                      </div>
                      <div v-else>
                        全部
                      </div>
                    </el-tooltip>
                  </div>
                  <div v-else-if="fruit == 'json_group_name'" style="display: flex; justify-content: center">
                    <!-- 用户群组：提示多个区域需要用分隔符区分，‘空格’+‘/’,超过三个显示超过的数量 -->
                    <el-tooltip class="item" effect="dark" :content="
                        scope.row.json_group_name && scope.row.json_group_name.length > 0
                          ? scope.row.json_group_name.join('/')
                          : '全部'
                      " placement="top">
                      <div v-if="
                          scope.row.json_group_name
                            && scope.row.json_group_name.length !== 0
                        " style="display: flex; justify-content: center">
                        <div v-if="index < 3" v-for="(item, index) in scope.row.json_group_name" :key="index">
                          {{ item }} /
                        </div>
                        <div v-if="scope.row.json_group_name.length > 3" class="table-num">
                          + {{ scope.row.json_group_name.length }}
                        </div>
                      </div>
                      <div v-else>
                        全部
                      </div>
                    </el-tooltip>
                  </div>
                  <div v-else>
                    <el-tooltip placement="top-start" :content="scope.row[fruit] + ''">
                      <div class="one_line_hidden">
                        {{ scope.row[fruit] ? scope.row[fruit] : "-" }}
                      </div>
                    </el-tooltip>
                  </div>
                </template>
              </el-table-column>
              <el-table-column fixed="right" width="300" prop="address" label="操作" align="center">
                <template slot-scope="scope">
                  <el-button style="margin: 5px" v-if="scope.row.status == 1 || scope.row.status == 3" type="warning"
                    size="mini" @click="saveStatus(scope.row, 2)">
                    关闭活动
                  </el-button>
                  <el-button style="margin: 5px" v-if="scope.row.status == 2" type="success" size="mini"
                    @click="saveStatus(scope.row, 1)">
                    开启活动
                  </el-button>
                  <el-button style="margin: 5px" type="warning" size="mini" @click="viewDetail(scope.row)">
                    编辑
                  </el-button>
                  <el-button style="margin: 5px" type="primary" size="mini" @click="inventory_details(scope.row)">
                    记录
                  </el-button>

                  <el-popconfirm title="这是一段内容确定删除吗？" @confirm="deleteCoupon(scope.row)">
                    <el-button style="margin: 5px" type="danger" size="mini" slot="reference">
                      删除
                    </el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
          <el-col style="text-align: right">
            <pagination v-show="total > 0" :total="total" :page.sync="searchForm.page" :limit.sync="searchForm.pageSize"
              @pagination="getListWay" />
          </el-col>
        </el-row>
      </div>
    </div>
    <!-- 详情抽屉 -->
    <detail ref="detail" v-if="ifShowDetail" :regionList="regionList" :gradeList="gradeList"
      :TagCategoryAll="TagCategoryAll" :groupingList="groupingList" :detailTitle="detailTitle" />
    <saveInventory  ref="refInventory" />
  </div>
</template>
<script>
  import {
    getInviteActivityList,
    getInvitestatus,
    getInvitedelete
  } from "@/api/recruitment/index"
  import saveInventory from "./components/inventory.vue";
  import {
    getgroupList,
    getTagCategoryAll,
    getgradeList,
    getRegionList,
  } from "@/api/user/index";
  // 引入
  import detail from "./detail";
  const tableTheadOption = {
    id: {
      label: "活动编号",
      field: "id",
      minwidth: "80",
    },
    activity_name: {
      label: "活动名称",
      field: "activity_name",
      minwidth: "120",
    },
    json_area_name: {
      label: "生效地区",
      field: "json_area_name",
      minwidth: "150",
    },
    people_count: {
      label: "参与人数",
      field: "people_count",
      minwidth: "100",
    },
    json_group_name: {
      label: "用户群组",
      field: "json_group_name",
      minwidth: "150",
    },
    created_at: {
      label: "创建时间",
      field: "created_at",
      minwidth: "120",
    },
    status: {
      label: "活动状态",
      field: "status",
      minwidth: "80",
    },
  };
  const allTableThead = ["id", "activity_name", "json_area_name", "people_count", "json_group_name","status","created_at"];
  const defaultTableThead = [
    "id",
    "activity_name",
    "json_area_name",
    "people_count",
    "json_group_name",
    "status",
    "created_at",
  ];
  export default {
    components: {
      detail,
      saveInventory
    },
    data() {
      return {
        time:[],
        searchDisplay:false,
        ifShowDetail: false, //是否打开详情抽屉
        detailTitle: "", //抽屉标题
        // 动态显示表头默认表头
        tableTheadOptions: tableTheadOption,
        tableThead: defaultTableThead, // 默认表头
        allTableThead: allTableThead,
        checkboxTableThead: defaultTableThead, // 默认表头值
        tableKey: 1, // 为了保证table 每次都会重渲
        loading: true,
        regionList: [], // 省市
        gradeList: [], // 等级
        TagCategoryAll: [], // 标签
        groupingList: [], // 分组
        status: [{
            name: "结束",
            id: "-1"
          },
          {
            name: "开启",
            id: "1"
          },
          {
            name: "关闭",
            id: "2"
          },
          {
            name: "进行中",
            id: "3"
          },
        ],
        searchForm: {
          activity_name: "", // 抽奖活动名称
          status: "", // 状态状态：-1过期 1开启 2关闭 3进行中
          time_start: "",
          time_end: "",
          page: 1,
          pageSize: 10,
        },
        dataList: [],
        total: 0,
      };
    },
    created() {
      const p1 = new Promise((resolve, reject) => {
        getgroupList().then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            this.$messages.error(res.msg);
            reject();
            return;
          }
          this.groupingList = res.data.list;
          resolve();
        });
      });
      const p2 = new Promise((resolve, reject) => {
        getTagCategoryAll().then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            this.$messages.error(res.msg);
            reject();
            return;
          }
          this.TagCategoryAll = res.data;
          resolve();
        });
      });
      const p3 = new Promise((resolve, reject) => {
        getgradeList().then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            this.$messages.error(res.msg);
            reject();
            return;
          }
          this.gradeList = res.data.list;
          resolve();
        });
      });
      const p4 = new Promise((resolve, reject) => {
        getRegionList({
          level: 2
        }).then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            this.$messages.error(res.msg);
            reject();
            return;
          }
          this.regionList = res.data;
          resolve();
        });
      });
      Promise.all([p1, p2, p3, p4])
        .then(() => {
          this.getListWay();
        })
        .catch(() => {
          this.loading = true;
        });
    },
    watch: {
      checkboxTableThead(valArr) {
        this.tableThead = this.allTableThead.filter(
          (i) => valArr.indexOf(i) >= 0
        );
        this.tableKey = this.tableKey + 1; // 为了保证table 每次都会重渲
      },
    },
    methods: {
      //刷新
      refresh(){
          this.searchForm.page = 1
          this.searchForm.pageSize = 10
          this.getListWay();
      },
      //邀请明细
      inventory_details(row) {
        this.$refs.refInventory.open(row)
      },
      //重置
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.time = []
        this.getListWay();
      },
      //打开抽屉
      addDetail(title) {
        this.detailTitle = title;
        this.ifShowDetail = true;
      },
      //编辑
      viewDetail(row) {
        this.detailTitle = "活动信息";
        this.ifShowDetail = true;
        this.$nextTick(() => {
          this.$refs.detail.getAwardInfoWay(row);
        });
      },
      //关闭抽屉
      closedetail() {
        this.ifShowDetail = false;
        this.getListWay();
      },
      getListWay() {
        this.loading = true;
        getInviteActivityList(this.searchForm).then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            this.loading = false;
            return this.$messages.error(res.msg);
          }
          this.dataList = res.data.list;
          this.total = res.data.total;
          this.loading = false;
        });
      },
      // 选择日期
      timeWay(val) {
        this.searchForm.time_start = val[0];
        this.searchForm.time_end = val[1];
      },
      deleteCoupon(row) {
        this.loading = true;
        getInvitedelete({
            id: row.id
          })
          .then((res) => {
            if (res.code !== 200 || res.status !== 1) {
              this.loading = false;
              return this.$messages.error(res.msg);
            }
            this.$messages.success("删除成功");
            this.getListWay();
          })
          .catch((err) => {
            this.loading = false;
            this.$messages.error(err.msg);
          });
      },
      // 修改状态
      saveStatus(row, num) {
        var obj = {
          id: row.id,
          status: num,
        };
        this.loading = true;
        getInvitestatus(obj)
          .then((res) => {
            if (res.code !== 200 || res.status !== 1) {
              this.loading = false;
              return this.$messages.error(res.msg);
            }
            this.$messages.success("操作成功");
            this.getListWay();
          })
          .catch((err) => {
            this.$messages.error(err.msg);
            this.loading = false;
          });
      },
    },
  };
</script>
<style lang="scss">
  .search-form-item {
    padding-bottom: 10px;
    padding-right: 20px;

    .el-form-item__label {
      font-size: 12px;
      font-weight: 500;
      // width:96px;
    }

    .el-input {
      width: 180px;
    }
  }
</style>
<style lang="scss" scoped>
  .marginBottom-10 {
    margin-bottom: 10px;
  }

  .marginRight-10 {
    margin-right: 10px;
  }

  .flex {
    display: flex;
  }

  .flex-between {
    display: flex;
    justify-content: space-between;
  }

  .button-box {
    font-size: 14px;
    text-align: right;
    font-size: 12px;

    .inquire-box {
      background: #1890ff;
      color: #ffffff;
    }

    .reset-box {
      background: #eeeeee;
    }
  }

  .app-container {
    background: #f3f5f7;

    .container-module {
      background: #fff;
      padding: 20px;
      border-radius: 5px;

      .title-module {
        font-size: 18px;
      }

      .search-module {
        padding-top: 20px;
        display: block;
      }

      .table-module {
        .table-top {
          margin-bottom: 20px;
        }

        .table-num {
          margin-left: 5px;
          background: #f0f0f0;
          width: 35px;
          border-radius: 5px;
        }
      }
    }
  }
</style>
